<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>电影编辑</title>


    <link rel="stylesheet" th:href="@{/public/lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/news/add.css}">
    <script th:src="@{/public/lib/jquery/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/public/lib/layui/layui.js}"></script>
    <script th:src="@{/news/add.js}"></script>


    <link rel="stylesheet" th:href="@{/news/aieditor/style.css}">
    <script type="module">
        import {AiEditor} from './aieditor/index.js'
        // import {AiEditor} from 'C:\Users\27846\Desktop\lession1226登录页面\lession1226-1\src\main\resources\static\aieditor\index.js'

        new AiEditor({
            element: "#aiEditor",
            placeholder: "点击输入电影详情...",
            content: '',
            onMentionQuery: (query) => {
                return [
                    'Michael Yang', 'Jean Zhou', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder'
                    , 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John'
                    , 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey'
                    , 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
                ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)
            },
            contentRetention:false,
            ai: {
                models: {
                    spark: {
                        appId: "57ba8c3a",
                        apiKey: "a213b7bff8d4efbf38457795019b5306",
                        apiSecret: "Y2RjOTBlNGNjOGNmYjc5Y2M5OTliZGYz",
                    }
                },
            },
        })
    </script>

    <script>
        let isDark = false;

        function dark() {
            if (!isDark) {
                document.body.style.background = "#1a1b1e"
                document.querySelector("#title").style.color = "#eee"
                document.querySelector("#aiEditor").classList.remove("aie-theme-light");
                document.querySelector("#aiEditor").classList.add("aie-theme-dark");
            } else {
                document.body.style.background = ""
                document.querySelector("#title").style.color = ""
                document.querySelector("#aiEditor").classList.remove("aie-theme-dark");
                document.querySelector("#aiEditor").classList.add("aie-theme-light");
            }
            isDark = !isDark;
        }

        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?9fd447a0f9e62a84d1b752a2cacb2c6b";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body>
<div>
        <form id="user-form" action="">
<!--            <div>-->
<!--                <label for="stuId">电影编号：</label>-->
<!--                <input type="text" id="stuId" autocomplete="off" placeholder="请输入电影编号">-->
<!--            </div>-->
            <div>
                <label for="phone">标题：</label>
                <input type="text" id="phone" autocomplete="off" placeholder="请输入标题">
            </div>


            <div>
                <label for="name">导演：</label>
                <input type="text" id="name" autocomplete="off" placeholder="请输入导演">
            </div>


            <div class="sex-wrapper">
                <label for="politics">电影类别：</label>
                <input type="radio" id="politics" name="sex" value="剧情" checked>
                <label for="politics">剧情</label>&nbsp;&nbsp;
                <input type="radio" id="economy" name="sex" value="爱情">
                <label for="economy">爱情</label>
                <input type="radio" id="technology" name="sex" value="科幻">
                <label for="technology">科幻</label>
                <input type="radio" id="health" name="sex" value="喜剧">
                <label for="health">喜剧</label>
                <input type="radio" id="sport" name="sex" value="动作">
                <label for="sport">动作</label>
            </div>

            <div>
                <label for="birthday">上映日期：</label>
                <input type="text" id="birthday" autocomplete="off"
                       placeholder="请输入上映日期，格式:2000-02-05" readonly>
            </div>

            <div>
                <label for="actor">主演：</label>
                <input type="text" id="actor" autocomplete="off" placeholder="请输入主演">
            </div>


            <div th:if="${showSubmit}">
                <label></label>
                <button id="submit-btn" type="button">提交</button>
            </div>
        </form>

        <div style="padding: 10px 20px;font-size: 30px" id="title">
            电影编辑
            <button onclick="dark()">切换主题</button>
        </div>

        <div id="aiEditor" style="height: 550px;  margin: 20px" ></div>
</div>
</body>
</html>